<template>
  <div class="tips-history-page">
    <div class="tips-content">
      <div class="time">
        <i class="icon icon-clock"></i>
        <span>{{content.auditTime | dateFormat('YYYY/MM/DD/HH:mm')}}</span>
      </div>
      <div class="content">
        {{content.content}}
      </div>
    </div>
    <block title="更新个股">
      <table>
        <thead>
          <th>方向</th>
          <th>名称/代码</th>
          <th class="text-right">理由</th>
        </thead>
        <tbody>
          <tr v-for="stock in stockRecords" :key="stock.stockCode">
            <td>
              <span>{{['', '调入', '调出', '调整'][stock.type]}}</span>
            </td>
            <td>
              <p>{{stock.stockName}}</p>
              <p>{{stock.stockCode}}</p>
            </td>
            <td class="text-left">
              {{stock.reason}}
            </td>
          </tr>
        </tbody>
      </table>
    </block>
    <div class="bottom-notice">
      风险提示：本版面所有言论仅为发表者个人观点，不代表本机构立场，投资者需审慎决策。请勿委托证券投资顾问人员或他人代为管理账户，代理买卖证券，由此导致的风险将由投资者自行承担。
    </div>
  </div>
</template>

<script>
import Block from './components/Block';
import { getTipContentDetailApp } from '../../api/tip';

export default {
  components: {
    Block
  },

  data() {
    return {
      stockRecords: [],
      content: {}
    }
  },

  mounted() {
    this.getTipContentDetailApp();
  },

  methods: {
    async getTipContentDetailApp() {
      const data = await getTipContentDetailApp(this.$route.params.tipId, this.$route.params.id, {
        size: 1,
        offset: 0,
      });
      this.content = data.data;
      this.stockRecords = data.list;
    }
  }
};
</script>

<style lang="less">
.tips-history-page {
  .tips-content {
    color: #666;
    margin-bottom: 10px;
    .time {
      background-color: #f5f5f6;
      display: flex;
      align-items: center;
      padding: 10px 15px;
    }

    .content {
      background-color: #fff;
      padding: 10px 15px;
      line-height: 1.4;
    }
  }

  table {
    width: 100%;
    text-align: center;

    thead {
      background-color: #f5f5f6;
      color: #5e6678;

      th {
        padding: 10px;
      }
    }

    tbody {
      background-color: #fff;
      color: #000;
      font-weight: bold;

      td {
        white-space: normal;
        padding: 10px;
        line-height: 1.4;
      }
    }
  }

  .bottom-notice {
    background-color: #FFF6F3;
    color: #ff7610;
    font-size: 12px;
    padding: 10px 15px;
    line-height: 1.3;
  }
}
</style>
